<!-- Auth.vue -->
<template>
    <div class="auth-container">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="登录" name="login">
          <el-form>
            <el-form-item label="用户名">
              <el-input v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="password" v-model="loginForm.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册" name="register">
          <el-form>
            <el-form-item label="用户名">
              <el-input v-model="registerForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="password" v-model="registerForm.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="register">注册</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        activeTab: 'login',
        loginForm: {
          username: '',
          password: ''
        },
        registerForm: {
          username: '',
          password: ''
        }
      }
    },
    methods: {
      login() {
        const adminAccount = { username: 'admin', password: 'admin', role: 'admin' }
        const userAccount = { username: 'user', password: 'user', role: 'user' }
  
        if (this.loginForm.username === adminAccount.username && this.loginForm.password === adminAccount.password) {
          localStorage.setItem('userRole', adminAccount.role)
          this.$router.push('index')
        } else if (this.loginForm.username === userAccount.username && this.loginForm.password === userAccount.password) {
          localStorage.setItem('userRole', userAccount.role)
          this.$router.push('/index')
        } else {
          this.$message.error('用户名或密码错误')
        }
      },
      register() {
        this.$message.success('注册完成,请登录')
        this.registerForm.username=''
        this.registerForm.password=''
      }
    }
  }
  </script>
  
  <style scoped>
  .auth-container {
    width: 400px;
    margin: 100px auto;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: #fff;
  }
  
  .el-form-item {
    margin-bottom: 20px;
  }
  
  .el-button {
    width: 100%;
  }
  </style>
  